<%@page import="org.eclipse.jdt.internal.compiler.ast.WhileStatement"%>
<%@ page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>已完成的订单</title>
<style type="text/css">
body {
  font-family: Arial, sans-serif; /* 设置字体 */
  background-color: #f8f8f8; /* 设置背景色 */
  padding: 20px; /* 设置页面内边距 */
}

h1 {
  color: #333; /* 设置标题颜色 */
  text-align: center; /* 标题居中 */
  margin-bottom: 20px;
}

table {
  width: 100%; /* 表格宽度撑满容器 */
  border-collapse: collapse; /* 移除单元格之间的间隔 */
}

th, td {
  border: 1px solid #ddd; /* 设置单元格边框 */
  padding: 8px; /* 设置单元格内边距 */
  text-align: left; /* 单元格文本居左对齐 */
}

.box {
  background-color: #fff; /* 设置盒子的背景色 */
  padding: 20px; /* 设置盒子内边距 */
  margin-bottom: 20px;
  border-radius: 5px; /* 盒子边框圆角效果 */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* 盒子阴影效果 */
}

.join {
  display: inline-block; /* 将按钮显示为内联块级元素 */
  background-color: #008CBA; /* 设置按钮背景色 */
  color: white; /* 设置按钮文字颜色 */
  padding: 10px 20px;
  text-decoration: none; /* 移除下划线 */
  border-radius: 5px; /* 按钮边框圆角效果 */
  margin-right: 10px; /* 按钮右边距 */
  transition: background-color 0.3s; /* 添加背景颜色过渡效果 */
}

.join:hover {
  background-color: #005f73; /* 鼠标悬停时的按钮背景色 */
}

/* 媒体查询，对不同屏幕尺寸进行样式调整 */
@media (max-width: 640px) {
  th, td {
    padding: 10px; /* 减小单元格内边距 */
    font-size: 14px; /* 减小字体大小 */
  }

  .box {
    padding: 15px; /* 减小盒子内边距 */
  }

  .join {
    padding: 8px 15px; /* 减小按钮内边距 */
    font-size: 14px; /* 减小按钮字体大小 */
  }
@media (max-width: 480px) {
  th, td {
    padding: 8px; /* 进一步减小单元格内边距 */
    font-size: 12px; /* 进一步减小字体大小 */
  }

  .box {
    padding: 10px; /* 进一步减小盒子内边距 */
  }

  .join {
    padding: 6px 12px; /* 进一步减小按钮内边距 */
    font-size: 12px; /* 进一步减小按钮字体大小 */
  }
}

@media (max-width: 320px) {
  th, td {
    padding: 6px; /* 最小单元格内边距 */
    font-size: 10px; /* 最小字体大小 */
  }

  .box {
    padding: 8px; /* 最小盒子内边距 */
  }

  .join {
    padding: 4px 8px; /* 最小按钮内边距 */
    font-size: 10px; /* 最小按钮字体大小 */
  }
  
</style>
<%
String restaurant_name = request.getParameter("restaurant_name");
String receptionist_name = request.getParameter("customer_name");
//
Class.forName("org.mariadb.jdbc.Driver");
Connection conn = DriverManager.getConnection("jdbc:mariadb://localhost:3306/mealdb?user=root&password=1230321");
Statement stmt = conn.createStatement(); 
%>
</head>
<body>
	<h4>用户:<%=receptionist_name%></h4>
	<h1><%=restaurant_name%>的当前订单:</h1>
		<div class="box">
		<table border="1">
			<%
			ResultSet rs = stmt.executeQuery("select * from dish d, meal_detail m ,customers c  WHERE d.meal = m.name AND c.res = '"+restaurant_name+"' ;");
			out.println("<table border='1'>");
			%>
			<tr>
				<th>菜名</th>
				<th>价格</th>
				<th>数量</th>
				<th>状态</th>
				<th>操作</th>
			</tr>
			<%
			while (rs.next()) {
				String meal_name = rs.getString("meal");
				String state = rs.getString("state");
				String num = rs.getString("num");
				String price = rs.getString("price");
				String order_num = rs.getString("order_num");
			%>
			<tr>
				<td class='id'>
					<%
					out.print(meal_name);
					%>
				</td>
				<td class='email'>
					<%
					out.print(price);
					%>
				</td>
				<td class='email'>
					<%
					out.print(num);
					%>
				</td>
				<td class='email'>
					<%
					out.print(state);
					%>
				</td>
				<td><a class="join" href='accOrder.jsp?meal_name=<%=meal_name%>&order_num=<%=order_num%>&restaurant_name=<%=restaurant_name%>&customer_name=<%=receptionist_name %>'>确认完成</a> 
				</td>
			</tr>
			<%
			}
			out.println("</table>");
			rs.close();
			stmt.close();
			conn.close();
			%>
			<div>
			<a class="join" href='getSum.jsp?restaurant_name=<%=restaurant_name%>&customer_name=<%=receptionist_name %>'>营业额</a>
			</div>
		</div>
</body>
</html>